ChasingEnglish.com is an ecommerce and content management system I built for my partner, a middle school English teacher who, after spending most of her adult life teaching in a classroom, sought a new beginning as an online educator and entrepreneur.
Content Management System
First and foremost, my client required the ability to easily input and update course schedules, descriptions, and prices to quickly adapt in response to customer feedback. To meet this need, I developed a CMS with React, using Ant Design components for data input and display, that consumed an API built with Node-Express and a mongoose ORM integrated with a mongoDB NoSQL database.
Ecommerce
I suggested an upfront online payment system so my client could avoid delinquent payment conversations which had been a pain point in a previous freelance role. I chose Stripe because its service works by redirecting users to their servers, which allowed me to avoid getting in over my head on security concerns. I was confident in Stripe’s security because they have a massive customer base containing some very well-known ecommerce sites.
UX and Styling
I began by asking the question: Who will be viewing the site and how will they use it?
The client
My client’s usage consisted of entering and viewing tabular data. To ease data entry of different course types, I relied on React’s ability to dynamically render form components. To provide a concrete example, her courses were fundamentally divided into those for the individual and those for groups. When creating a course for the individual, I chose to make the field for the number of openings available absent.
Tables are great for displaying a lot of information at a glance, but can lead to a cluttered appearance when too many items are shown at once. To avoid this, I limited the number of rows per view using pagination, and made vital, (but expansive), data available by clicking icons.
Though the administrator’s views are fine on small screens, a mobile-first approach was not taken, because all data entry was better-suited for laptop to desktop sized screens.
The client’s customers
Trying to simultaneously convey professionalism and warmth was the biggest styling challenge of this project. As an ecommerce site, it was important to project security and professionalism (who wants to take out their credit card for a site using Comic Sans font?), but teaching involves making human connections with parents and their children, so the edges needed to be softened up a bit.
To tick the secure/professional box, I used a subdued and classic color palette of white with shades of gray. Muted colors were used sparingly, with exceptions for elements directing user actions or calls to attention.
To bring in a sense of humanity (and mirror the services rendered by my client), I turned to a free suite of illustrations depicting young-looking people using digital devices.
